<template>
  <div class="left-area">
    <div class="message" v-for="item in asideList" :key="item.id">
      <div class="fatherArea">
        <dl class="area" v-show="item">
          <router-link 
            tag="dt" 
            class="area-pic" 
            :to="{ path:'/detail' + item.routes, query: {data:item.id}}"
            @click="handleRouteChange(item.title)"
          >
            <img :src="item.imgUrl" :alt="item.title"/>
          </router-link>
          <dd class="area-desc">
            <router-link 
              tag="h5" 
              class="desc-title"
              :to="{ path:'/detail' + item.routes, query: {data:item.id}}"
              @click="handleRouteChange(item.title)"
            >{{item.title}}</router-link>
            <div class="desc-count">
              <span>今日：</span><span>{{item.today}}</span>
              <span>主题：</span><span>{{item.theme}}</span>
              <span>帖子：</span><span>{{item.total}}</span>
            </div>
          </dd>
        </dl>
      </div>

      <div class="childArea" v-show="item.children">
        <h5 class="name">子版块</h5>
        <dl 
          class="area"
          v-for="innerItem in item.children"
          :key="innerItem.id"
        >
          <router-link
             tag="dt" 
             class="area-pic"
             :to="{ path:'/detail' + innerItem.routes, query: {data:innerItem.id}}"
             @click="handleRouteChange(innerItem.title)"
          >
            <img :src="innerItem.imgUrl" :alt="innerItem.title"/>
          </router-link>
          <dd class="area-desc">
            <router-link 
              tag="h5" 
              class="desc-title" 
              :to="{ path:'/detail' + innerItem.routes, query: {data:innerItem.id}}"
              @click="handleRouteChange(innerItem.title)"
            >
              {{innerItem.title}}
            </router-link>
            <div class="desc-count">
              <span>主题：</span><span>{{innerItem.theme}}</span>,
              <span>帖子：</span><span>{{innerItem.total}}</span>
            </div>
            <div class="recentRequest" >
              最后回复:
              <span>{{innerItem.lastRequestTime}}</span>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftArea',
  props: ['asideList'],
  inject: ['reload'],
  data () {
    return {
      hasChild: false
    }
  },
  methods: {
    handleRouteChange (title) {
      this.$route.meta.title = title + ' - 核客论坛 - Powered by phpwind';
    }
  },
  watch: {
    $route (to, from ,next) {
      if (to.path !== from.path) {
        this.reload();
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  .left-area
    margin-bottom: .8rem
    min-height: 2.28rem
    .message
      background-color: $bgcolor-white
      border-left: .01rem solid #efefef
      border-right: .01rem solid #efefef
      color: #333
      .fatherArea
        height: 2.28rem
        margin-top: .1rem
        display: flex 
        flex-direction: column
        .area 
          width: 100%
          .area-pic
            cursor: default
          .area-desc
            .desc-title
              font-weight: bold
              font-size: .3rem
            .desc-title:hover
              text-decoration: none
              cursor: default
            .desc-count
              margin-top: .1rem
            .desc-count span:nth-child(even)
              font-weight: bold
      .childArea
        display: flex
        flex-wrap: wrap
        background: #fbfbfb
        margin: 0 .4rem
        padding: 0 .45rem
        border-top: .02rem solid $borderColor
        border-bottom: .02rem solid $borderColor
        .area 
          align-items: center
          padding-bottom: .2rem
          border-top: .02rem dashed $borderColor
      .name
        width: 100%
        height: .5rem
        line-height: .5rem
        font-size: .22rem
        font-weight: bold
        color: $font-welcome
      .area
        width: 5.9rem
        height: 1.66rem
        display: flex
        flex-wrap: no-wrap
        font-size: .24rem
        color: $font-deep
        .area-pic
          margin: .22rem .26rem .22rem .36rem
          cursor: pointer
        .area-desc
          display: flex
          flex-direction: column
          justify-content: center
          .desc-title
            font-weight: bold
            margin-bottom: .1rem
            color: $font-black
          .desc-title:hover
            text-decoration: underline
            cursor: pointer
          .desc-count
            margin-bottom: .1rem
            span
              display: inline-block
              margin-right: .04rem
          .desc-count span:nth-child(even),
          .recentRequest span:nth-child(1)
            color: $font-black
          .recentRequest span:hover
            text-decoration: underline 
</style>
